<template>
  <div class="widget-form-container">

    <el-form ref="form"
             class="widget-form-list">
      <draggable :list="ctdata.list"
                 group="people"
                 :component-data="{ name: 'flip-list', type: 'transition' }"
                 tag="div"
                 :item-key="ctdata.id"
                 @end="handleMoveEnd"
                 @add="handleWidgetAdd">
        <template #item="{ element}">

          <div>

            <!-- <form-row-draggable v-if="element.type='grid'"
                                :node="element">
            </form-row-draggable>
            <div v-else>
              {{element}},{{index}}
            </div> -->
            <!-- 
            <div v-if="element.type=='grid'">

              this grid
            </div> -->

            <form-row-draggable v-if="element.type=='grid'"
                                v-model:select="selectWidget"
                                :node="element">
            </form-row-draggable>

            <!-- <widget-form-item :element="element"
                              v-else
                              :index="index"
                              v-model:select="selectWidget"></widget-form-item> -->

          </div>

        </template>

      </draggable>

    </el-form>

    <!-- 下面一任意拖放的测试 -->
    <vue-draggable-resizable :w="100"
                             :h="100"
                             :resizable="false">
      <p>固定宽和高，同时不能resize</p>
    </vue-draggable-resizable>
  </div>
</template>

<script>
// import WidgetFormItem from "./WidgetFormItem";

import draggable from "vuedraggable";
import VueDraggableResizable from "vue-draggable-resizable-vue3";
import formRowDraggable from "./FormRow.vue";
export default {
  name: "form-container",
  props: ["ctdata"],
  components: {
    VueDraggableResizable,
    draggable,
    formRowDraggable,
    // WidgetFormItem,
  },
  data () {
    return {
      selectWidget: {},
      form: {},
    };
  },
  watch: {
    select (val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler (val) {
        console.log("select container watch ..." + val);
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
  methods: {

    handleMoveEnd ({ newIndex, oldIndex }) {
      console.log("index", newIndex, oldIndex);
    },
    handleWidgetAdd (evt) {
      console.log("add in container", evt);
      // console.log("end", evt);
    },
    handleWidgetColAdd ($event, row, colIndex) {
      console.log('coladd handleWidgetColAdd', $event, row, colIndex)
      const newIndex = $event.newIndex
      const oldIndex = $event.oldIndex
      const item = $event.item

      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf('data-grid') >= 0) {

        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, row.columns[colIndex].list[newIndex])

        row.columns[colIndex].list.splice(newIndex, 1)

        return false
      }

      console.log('from', item)

      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)

      this.$set(row.columns[colIndex].list, newIndex, {
        ...row.columns[colIndex].list[newIndex],
        options: {
          ...row.columns[colIndex].list[newIndex].options,
          remoteFunc: 'func_' + key
        },
        key,
        // 绑定键值
        model: row.columns[colIndex].list[newIndex].type + '_' + key,
        rules: []
      })

      if (row.columns[colIndex].list[newIndex].type === 'radio' || row.columns[colIndex].list[newIndex].type === 'checkbox' || row.columns[colIndex].list[newIndex].type === 'select') {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          options: {
            ...row.columns[colIndex].list[newIndex].options,
            options: row.columns[colIndex].list[newIndex].options.options.map(item => ({
              ...item
            }))
          }
        })
      }

      this.selectWidget = row.columns[colIndex].list[newIndex]
    }
  },
  mounted () {
    console.log(this.ctdata);
  },

};
</script>

<style>
</style>